import React, {useEffect, useState} from 'react';
import {Button, Form, Input, message} from "antd";
import {Seat} from "@/cms/layout";

function Info(props) {
    const [info,setInfo] = useState({}),
        [form] = Form.useForm();

    useEffect(()=>{
        queryList();
    },[])
    function queryList(){
        ax.get("/api/getBankInfo").then(res=>{
            setInfo(res.data[0]);
            form.setFieldsValue({
                ...res.data[0]
            })
        })
    }
    function onFinish(values){
        ax.post("/api/setBankInfo",{
            ...values,
        }).then(res=>{
            message.success(res.msg);
            queryList();
        })
    }
    return (
        <div>
            <Form
                labelCol={{span: 5}}
                wrapperCol={{span: 14}}
                form={form}
                onFinish={onFinish}
            >
                <Form.Item
                    label={"银行卡名称"}
                    name={"bankName"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}

                >
                    <Input placeholder={"如：工商银行"}/>
                </Form.Item>
                <Form.Item
                    label={"开户行"}
                    name={"branchName"}
                >
                    <Input placeholder={"如：工商银行，回龙观支行"}/>
                </Form.Item>
                <Form.Item
                    label={"持卡人姓名"}
                    name={"holderName"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder={"请输入持卡人姓名"}/>
                </Form.Item>
                <Form.Item
                    label={"银行卡号"}
                    name={"cardNumber"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder={"请输入银行卡号"}/>
                </Form.Item>
                <div className={"flexCenter"}>
                    <Button type={"primary"} style={{width:120}} htmlType={"submit"}>保存</Button>
                </div>
                <Seat h={150}/>
            </Form>
        </div>
    );
}

export default Info;